<script setup lang='ts'>
import type { FieldValues, PlusColumn } from 'plus-pro-components'
import type { VxeGridProps, VxePagerEvents } from 'vxe-table'
import { SearchForm, SearchTable } from '@fl/components'
import { cloneDeep } from 'lodash-es'
import { reactive } from 'vue'
const { go } = useRouter()
import { useOrgIndex, useOrgDelete } from '@fl/api/xf-api'

defineOptions({
    // eslint-disable-next-line vue/component-definition-name-casing
    name: 'industry-evaluation-company-index',
})

const route = useRoute()
const _parkId = route.query?.parkId as string
const parkId = ref<string>(_parkId ?? '')
const _areaId = route.query?.areaId as string
const areaId = ref<string>(_areaId ?? '')
const _name = route.query?.name as string
const parkName = ref<string>(_name ?? '')
// console.log('route', parkId.value, parkName.value, areaId.value)

const { push } = useRouter()
const tableRef = ref()

// 搜索条件、分页参数
const initialState = {
    enterpriseName: '',
}
const state = ref<FieldValues>(cloneDeep(initialState))
const tablePage = ref({
    currentPage: 1,
    pageSize: 10,
    total: 0,
})
const initialPage = toRaw({ ...tablePage.value })

// 查询列表
const params = computed(() => ({
    pageNum: tablePage.value.currentPage,
    pageSize: tablePage.value.pageSize,
    parkId: parkId.value,
    ...state.value,
}))
const { data, isLoading } = useOrgIndex(params)
const records = ref<any>()
watchEffect(() => {
    if (data.value) {
        records.value = cloneDeep(data.value.records)
        tablePage.value.total = data.value.total!
    }
})

// 删除
const { mutate: deleteMutate } = useOrgDelete()

function goBack() {
    go(-1)
}

// 搜索
function submit(values: FieldValues) {
    state.value = { ...values }
    tablePage.value.currentPage = 1
}

// 重置
function reset() {
    state.value = initialState
    tablePage.value = initialPage
}

// 新增
function goToAdd() {
    push(`/house-source-center/evaluation-management/industry-evaluation/org-add?parkId=${parkId.value}&areaId=${areaId.value}`)
}

// 列表：查看
function goToShow(row: any) {
    push(`/house-source-center/evaluation-management/industry-evaluation/org/${row.id}/edit?parkId=${parkId.value}&areaId=${areaId.value}&isReadOnly=1`)
}

// 列表：编辑
function goToEdit(row: any) {
    push(`/house-source-center/evaluation-management/industry-evaluation/org/${row.id}/edit?parkId=${parkId.value}&areaId=${areaId.value}`)
}

// 列表：删除
function deleteConfirm(row: any) {
    console.log('删除', row.id)
    deleteMutate([row.id], {
        onSuccess: () => {
            ElMessage.success('操作成功')
        },
    })
}

const handlePageChange: VxePagerEvents.PageChange = ({ currentPage, pageSize }) => {
    tablePage.value.currentPage = currentPage
    tablePage.value.pageSize = pageSize
}

const columns: PlusColumn[] = [
    {
        label: '企业名称',
        prop: 'enterpriseName',
        valueType: 'copy',
    },
]
const gridOptions = reactive<VxeGridProps>({
    columns: [
        { title: '序号', type: 'seq', width: 50 },
        { field: 'enterpriseName', title: '公司名称' },
        { field: 'enterpriseCode', title: '社会信用代码' },
        { field: 'legalPerson', title: '法定代表人' },
        { field: 'establishTime', title: '成立日期' },
        { field: 'registeredCapital', title: '注册资本（万元）' },
        { field: 'enterpriseType', title: '行业分类' },
        { slots: { default: 'operate' }, title: '操作', width: 220 },
    ],
})
</script>

<template>
    <div class="flex mb20">
        <el-button @click="goBack">
            返回园区列表
        </el-button>
        <div class="title">{{ parkName }}园区企业信息</div>
    </div>
    

    <ElCard class="mb-20" shadow="never">
        <SearchForm v-bind="state" :columns="columns" submit-text="搜索" @reset="reset" @submit="submit" />
    </ElCard>

    <ElCard shadow="never">
        <SearchTable ref="tableRef" v-bind="gridOptions" v-model:pager="tablePage" :loading="isLoading" :data="records"
            @page-change="handlePageChange">
            <template #areaName="{ row }">
                {{ row.areaName }}
            </template>

            <template #toolbar_buttons>
                <ElButton type="primary" @click="goToAdd">
                    <div class="i-ic:baseline-add size-16" />
                    新增
                </ElButton>
            </template>

            <template #operate="{ row }">
                <el-button text @click="goToShow(row)">
                    查看
                </el-button>

                <el-button type="primary" text @click="goToEdit(row)">
                    编辑
                </el-button>

                <el-popconfirm title="确认删除吗？" @confirm="deleteConfirm(row)">
                    <template #reference>
                        <el-button text type="warning">
                            删除
                        </el-button>
                    </template>
                </el-popconfirm>

            </template>
        </SearchTable>
    </ElCard>
</template>

<style scoped>
.title {
    height: 30px;
    line-height: 30px;
    font-size: 16px;
    font-weight: 600;
    margin-left: 20px;
}
</style>
